<template>
  <div>
    <BasicModal
      width="80%"
      v-bind="$attrs"
      @register="registerModal"
      title="留学生详情"
      @ok="handleSubmit"
    >
      <Description :data="mockData" :column="3" :schema="schema" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Description, useDescription } from '/@/components/Description/index';

  import { schema } from './data';

  export default defineComponent({
    name: 'SalesUserModal',
    components: {
      BasicModal,
      Description,
    },
    emits: ['success', 'register'],
    setup() {
      const [register] = useDescription({
        column: 3,
        schema: schema,
      });

      const mockData = {
        username: 'test',
        nickName: 'VB',
        age: '123',
        phone: '15695909xxx',
        email: '190848757@qq.com',
        addr: '厦门市思明区',
        sex: '男',
        certy: '3504256199xxxxxxxxx',
        tag: 'orange',
      };

      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        console.log(data);
      });

      async function handleSubmit() {
        closeModal();
      }
      return {
        registerModal,
        register,
        closeModal,
        handleSubmit,
        mockData,
        schema,
      };
    },
  });
</script>
